<style lang='scss' type='stylesheet/scss' scoped>
.as-dropdown {
  margin-bottom: 10px;
}
</style>
<template>
  <div>
    <as-h2>command</as-h2>
    <as-card :text="text"
             title="点击菜单栏选项时，可以触发 command 事件。">
      <as-dropdown @command="handlerCommand">
        <span>接下来做什么 <i class="el-icon-arrow-down"></i></span>
        <as-dropdown-menu slot="dropdown">
          <as-dropdown-item command="看电视">看电视</as-dropdown-item>
          <as-dropdown-item command="学习">学习</as-dropdown-item>
          <as-dropdown-item command="吃火锅">吃火锅</as-dropdown-item>
        </as-dropdown-menu>
      </as-dropdown>
    </as-card>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from "vuex";
export default {
  name: "",
  computed: {
    ...mapGetters(["isMobile"])
  },
  data() {
    return {
      text: `<template>
   <as-dropdown @command="handlerCommand">
     <span>接下来做什么 <i class="el-icon-arrow-down"></i></span>
     <as-dropdown-menu slot="dropdown">
       <as-dropdown-item command="看电视">看电视</as-dropdown-item>
       <as-dropdown-item command="学习">学习</as-dropdown-item>
       <as-dropdown-item command="吃火锅">吃火锅</as-dropdown-item>
     </as-dropdown-menu>
   </as-dropdown>
 </template>
 <script>  
   export default{
     methods: {
       handlerCommand(command) {
         this.$message.info(command);
       }
     }
   }  
 <\/script>`
    };
  },
  methods: {
    handlerCommand(command) {
      this.$message.info(command);
    }
  }
};
</script>
